<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import { Member } from "../member";
const reverseCard = ref(false);
const showCardName = ref(false);

const props = defineProps<{ winners: Member[] ,zzs:string}>();

onMounted(() => {
  setTimeout(() => {
    reverseCard.value = true;
    setTimeout(() => {
      showCardName.value = true;
    }, 500);
  }, 1000);
});
// 格式化电话号码的方法
function formatPhone(phone: string): string {
  if (phone.length !== 11) return phone; // 如果长度不为 11，直接返回原号码
  const firstPart = phone.slice(0, 3); // 截取前 3 位
  const lastPart = phone.slice(-4);    // 截取后 4 位
  return `${firstPart}****${lastPart}`;
}

// 格式化 winners 数据
const formattedWinners = computed(() =>
  props.winners.map((item) => ({
    ...item,
    formattedPhone: formatPhone(item.phone), // 格式化电话号码
  }))
);
const scale = computed(() =>
  props.winners.length > 10 ? "0.5" : props.winners.length >= 5 ? "0.75" : "1"
);
const width = computed(() =>
  props.winners.length > 20
    ? "2000px"
    : props.winners.length > 10
    ? "1800px"
    : props.winners.length > 6
    ? "1350px"
    : "810px"
);
</script>

<template>

  <div class="prizes-scale">
    <div
      ref="canvasRef"
      style="width: 100%; height: 100%; position: fixed"></div>
    <ul class="prizes">
      <li
        v-for="item in formattedWinners"
        :class="[reverseCard && 'reverse', showCardName && 'showName']">
          <span class="name">{{ item.name }}</span>
        <span class="phone">{{ item.formattedPhone }}</span>
      </li>
    </ul>
    
  </div>
</template>

<style scoped lang="less">
@keyframes scaleAnimation {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.prizes-scale {
  position: absolute;
  padding: 50px;
  transform: scale(v-bind(scale));
}

.prizes {
  width: v-bind(width);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  list-style: none;
  animation-timing-function: ease-in;
  animation-name: scaleAnimation;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  li {
    width: 200px;
    height: 293px;
    position: relative;
    text-align: center;
    transition: all 1s;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("../assets/card_bg.png");
    background-size: 100% 100%;
    flex-direction: column;

    .prize-class,
    .name {
      &:not(.prize-class) {
        font-weight: 600;
        //text-shadow: white 1px 0 1px;
        font-size: 45px;
        font-family: SimHei;
      }
     
      &.prize-class {
        font-size: 45px;
      }
      color: rgba(0, 0, 0, 1);
      opacity: 0;
      transition: all 0.5s ease-in;
    }
    .phone {
      &:not(.prize-class) {
        font-weight: 450;
        //text-shadow: white 1px 0 1px;
        font-size: 25px;
        font-family: SimHei;
      }
        &.prize-class {
        font-size: 45px;
      }
      color: rgba(0, 0, 0, 1);
      transition: all 0.5s ease-in;
    }
    &.showName {
      .prize-class,
      .name {
        opacity: 1;
      }
    }
    &.reverse {
      transform: rotateY(0deg);
      background-image: url("../assets/card_bg_active.png");
    }
  }
}
</style>
